﻿@using MultiTenant.Helpers
@model MultiTenant.Models.StoreViewModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="@Url.Style("Store.css")" rel="stylesheet" type="text/css"/>

<h2>This is the CORE store.</h2>

<div id="storeGrid"></div>

@using (Html.BeginForm("StoreApi/Post", "api", FormMethod.Post, new {id = "storesForm"}))
{
    <div class="panel storePanel">
        <div class="panelHeader">
            <input class="k-button" data-bind="click: onStoreClick" id="storeButton" type="button" value="-" />
            <strong>Store</strong>
        </div>
        <div id="storeDetail">
            <div>
                <span class="storeLabel">Id:</span>
                <span>@Html.TextBoxFor(model => model.Id)</span>
            </div>
            <div>
                <span class="storeLabel">Name:</span>
                <span>@Html.TextBoxFor(model => model.Name)</span>
            </div>
            <div>
                <span class="storeLabel">Number:</span>
                <span>@Html.TextBoxFor(model => model.Number)</span>
            </div>
            <div>
                <span class="storeLabel">City:</span>
                <span>@Html.TextBoxFor(model => model.City)</span>
            </div>
            <div>
                <span class="storeLabel">Number:</span>
                <span>@Html.TextBoxFor(model => model.State)</span>
            </div>
        </div>
    </div>
}

<div class="panel" id="traitViewPanel">
    <div class="panelHeader">
        <strong>View Traits</strong>
    </div>
    <div id="traitViewGrid"></div>
</div>

<div id="traitAddButton">
    <input type="button" value="+"/>
</div>

<div class="panel" id="traitAddPanel">
    <div class="panelHeader">
        <strong>Add Traits</strong>
    </div>
    <div id="traitAddGrid"></div>
</div>

<script src="@Url.Script("StoreViewModel.js")"></script>

<script type="text/javascript">
    (function () {
        var viewModel = storeViewModel();
        $('#storesForm').ajaxForm({
            dataType: 'json',
            iframe: false,
            success: function() {
                viewModel.onStoreSuccess();
            },
            type: 'POST'

        });
        $("#storeGrid").kendoGrid({
            autoBind: true,
            change: function() {
            },
            filterable: false,
            groupable: false,
            height: "300px",
            pageable: true,
            resizeable: true,
            selectable: "single, row",
            sortable: {
                mode: "single",
                allowUnsort: false
            },
            dataSource: {
                pageSize: 30,
                type: "json",
                transport: {
                    read: function(options) {
                        $.ajax({
                            url: "@Url.Action("GetStores", "api/StoreApi", new { Area = ""})",
                            success: function(result) {
                                options.success(result);
                            },
                            type: "GET"
                        });
                    }
                },
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            City: { type: "city" },
                            Name: { type: "string" },
                            Number: { type: "number" },
                            State: { type: "string" }
                        }
                    }
                }
            },
            columns: [
                {
                    field: "Id",
                    title: "Id",
                    width: "70px"
                },
                {
                    field: "Name",
                    title: "Name",
                    width: "180px"
                }, {
                    field: "Number",
                    title: "Number",
                    width: "90px"
                },
                {
                    field: "City",
                    title: "City",
                    width: "180px"
                },
                {
                    field: "State",
                    title: "State",
                    width: "80px"
                }]
        });
        $("#traitViewGrid").kendoGrid({
            autoBind: true,
            change: function () {
            },
            filterable: false,
            groupable: false,
            height: "90%",
            pageable: true,
            resizeable: true,
            selectable: "single, row",
            sortable: {
                mode: "single",
                allowUnsort: false
            },
            dataSource: {
                pageSize: 30,
                type: "json",
                transport: {
                    read: function (options) {
                        $.ajax({
                            url: "@Url.Action("GetViewTraits", "api/TraitApi", new { Area = ""})",
                            success: function (result) {
                                options.success(result);
                            },
                            type: "GET"
                        });
                    }
                },
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            Name: { type: "string" },
                        }
                    }
                }
            },
            columns: [
                {
                    field: "Name",
                    title: "Name",
                    width: "180px"
                }]
        });
        viewModel.$traitViewGridData = $("#traitViewGrid").data('kendoGrid');
        $("#traitAddGrid").kendoGrid({
            autoBind: true,
            change: function () {
            },
            height: "90%",
            filterable: false,
            groupable: false,
            pageable: true,
            resizeable: true,
            selectable: "single, row",
            sortable: {
                mode: "single",
                allowUnsort: false
            },
            dataSource: {
                pageSize: 30,
                type: "json",
                transport: {
                    read: function (options) {
                        $.ajax({
                            url: "@Url.Action("GetAddTraits", "api/TraitApi", new { Area = ""})",
                            success: function (result) {
                                options.success(result);
                            },
                            type: "GET"
                        });
                    }
                },
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            Name: { type: "string" },
                        }
                    }
                }
            },
            columns: [
                {
                    field: "Name",
                    title: "Name",
                    width: "180px"
                }]
        });
        viewModel.$traitAddGridData = $("#traitAddGrid").data('kendoGrid');
        ko.applyBindings(viewModel);
    })();
</script>
